<template xmlns:float="http://www.w3.org/1999/xhtml">
  <div>
    <div style="width: 1300px;height:20px;margin-left: 10%"><i class="fa fa-neuter "></i>北京
      <el-button type="success" plain style="height: 35px;">切换城市</el-button>
      <div class="div2">
        <li type="none"><a href="" > 我的茶百道 &nbsp;</a></li>
        <li type="none"><a href="" > 商家中心 &nbsp;</a></li>
        <li type="none">进店规则</li></div>
    </div>
    <div style="width:1200px;height:60px;display: table;margin-left: 10%">
      <img  src="../img/10.jpeg"style="height: 90px;border-radius: 60%" />
      <div style="display: table-cell" class="resturant-container1">
        <ul>
          <li><a href="http://localhost:8080/#/First1">首页</a></li>
          <li>店铺列表</li>
          <li><a href="http://localhost:8080/#/First1">店铺位置</a></li>
          <li><a href="http://localhost:8080/#/First1">红茶/奶茶/绿茶</a></li>
          <li><el-input type="text" v-model='input' placeholder="搜索商家或地点" ></el-input></li>
          <li><el-button icon="el-icon-search" type="primaty"> 搜索</el-button></li>
        </ul>

      </div>
      <div style="display: table-cell" class="resturant-container2">
        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
        <a href="">登录/注册</a>
      </div>
    </div>

    <el-breadcrumb separator="/">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品展示</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row></el-row>

    <el-card>
      <el-carousel :interval="2000" type="card" height="250px">
        <el-carousel-item v-for="item in imgList" :key="item">
          <img :src="item.img" style="height:100%;width:100%;">
        </el-carousel-item>
      </el-carousel>
    </el-card>

    <div class="resturant-fire"><i class="fa fa-list"></i>商品列表</div>
    <div class="resturant-objects">
      <a href="">
        <img src="../img/1.jpeg" width="300px" height="240px"/>
        <h5>桔红柚子茶</h5>
        <h5>价格：7元</h5>
      </a>
    </div>
    <div class="resturant-objects">
      <img src="../img/2.jpeg" width="300px" height="240px"/>
      <h5>茉莉花茶</h5>
      <h5>价格：8元</h5>
    </div>
    <div class="resturant-objects">
      <img src="../img/3.jpeg" width="300px" height="240px"/>
      <h5>绿茶烟幕茶</h5>
      <h5>价格:9元</h5>
    </div>
    <div class="resturant-objects">
      <img src="../img/4.jpeg" width="300px" height="240px"/>
      <h5>响彻天地茶</h5>
      <h5>价格：10元</h5>
    </div>
    <div class="resturant-objects">
      <img src="../img/5.jpeg" width="300px" height="240px"/>
      <h5>谁与争锋茶</h5>
      <h5>价格:11元</h5>
    </div>
    <div class="resturant-objects">
      <img src="../img/7.jpeg" width="300px" height="240px"/>
      <h5>我就看大海茶</h5>
      <h5>价格：12元</h5>
    </div>
    <div class="resturant-objects">
      <img src="../img/2.jpeg" width="300px" height="240px"/>
      <h5>你想不想和茶</h5>
      <h5>价格:14元</h5>
    </div>
    <div class="resturant-objects">
      <img src="../img/1.jpeg" width="300px" height="240px"/>
      <h5>大弟小弟茶</h5>
      <h5>价格：13元</h5>
    </div>

    <hr width="80%"/>
    <div class="div3">
      <h3>用户帮助</h3>
      <a href="">申请退款<br></a>
      <a href="">常见问题<br></a>
      <a href="">用户协议<br></a>
      <a href="">隐私政策<br></a>
    </div>
    <div class="div3">
      <h3>公司信息</h3>
      <a href="">关于我们<br></a>
      <a href="">投资者联系<br></a>




      <a href="">加入我们<br></a>
      <a href="">保险经纪资质<br></a>
    </div>
    <div class="div3">
      <h3>茶百道服务</h3>
      <a href="">茶百道外卖<br></a>
      <a href="">茶百道酒店<br></a>
      <a href="">茶百道招聘网<br></a>
      <a href="">茶百道配送<br></a>
      <a href="">茶百道云<br></a>
      <a href="">豆瓣<br></a>
    </div>
    <hr width="80%"/>
    <div style="margin-left: 10%">茶百道团购 chileme.com</div>
  </div>


</template>

<script>


  export default {

    name: "resturants",

    data() {
      return {
        input:'',
        form: {
          username: '',
          password: ''
        },
        imgList: [
          {img: require('../img/6.jpeg')},
          {img: require('../img/5.jpeg')},
          {img: require('../img/4.jpeg')},
          {img: require('../img/3.jpeg')},
        ],
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",

      }
    }
  }
</script>

<style scoped>

  .resturant-container1 {
    width: 1000px;
    height: 20px;
    font-size: 20px;
    color: red;
    /*margin-bottom: 20px;*/
    background-color: #ffffff;
    border: 10px;
    padding: 10px;
  }
  .el-carousel__item img {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }


  a{text-decoration:none
  }

  .resturant-container2 {
    text-align:center;
    width: 100px;
    height: 40px;
    font-size: 15px;
    margin-top: 15px;
    color: darkorange;
    background-color: #ffffff;
    padding: 10px;
  }
  ul{ list-style-type: none;
    float:left}
  li{
    float: left;
    padding:10px;
  }
  .div2{
    float: right;
  }
  .div3{
    width: 100px;
    margin-left: 10%;
    float:left;
  }

  .resturant-objects {
    float: left;
    width: 300px;
    height: 300px;
    margin-left: 20px;
    padding: 20px;
    text-align: center;
  }

  .resturant-fire {
    color: dodgerblue;
    font-size: 30px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 250px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

</style>
